<template>
  <div>
    <!-- loading加载表格时间 -->
    <el-table
      @selection-change="handleSelectionChange"
      v-loading="tableLoading"
      element-loading-text="少女祈祷中。。。"
      height="700"
      :data="
        //搜索条件
        tableData.filter(
          (data) =>
            !search ||
            data.author.email.toLowerCase().includes(search.toLowerCase()) ||
            data.title.toLowerCase().includes(search.toLowerCase())
        )
      "
    >
      <!-- 表头多选模式 -->
      <el-table-column type="selection" width="55" />
      <el-table-column prop="_id" label="唯一ID" width="220" />
      <el-table-column prop="title" label="标题" width="190" />
      <el-table-column prop="author.email" label="UP主邮箱" min-width="80" />
      <el-table-column label="分区" width="150">
        <template v-slot="scope">
          <span v-for="item in scope.row.type" :key="item._id">
            {{ item.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="collectList" label="收藏数" min-width="80" />
      <el-table-column prop="playCount" label="播放量" min-width="80" />
      <el-table-column sortable="" prop="audit" label="审核状态">
        <template v-slot="scope">
          <span>{{ scope.row.audit ? "审核通过" : "尚未通过" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <!-- v-slot自定义头部子组件 -->
        <template #header>
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入邮箱或标题搜索"
          />
        </template>
      </el-table-column>
      <!-- 右侧固定删除编辑列 -->
      <el-table-column fixed="right" align="center" width="200px">
        <template #header>
          <el-button size="small" type="danger" @click="remove()">
            <span>批量删除</span>
          </el-button>
        </template>
        <!-- v-slot传入默认组件 命名为scope -->
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="$router.push(`/videos/edit/${scope.row._id}`)"
          >
            <span>查看</span>
          </el-button>
          <!-- 单删除确认气泡 -->
          <el-popconfirm
            @confirm="singleRemove(scope.row)"
            confirmButtonText="肯定"
            cancelButtonText="不了"
            icon="el-icon-info"
            iconColor="red"
            :title="confirmTitle"
          >
            <el-button
              @click="changeTitle(scope.row)"
              slot="reference"
              size="mini"
              type="danger"
            >
              <span>删除</span>
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 删除确认文本
      confirmTitle: ``,
      // 多选变量
      multipleSelection: [],
      //默认加载loading
      tableLoading: true,

      tableData: [],
      search: "",
    }
  },
  methods: {
    // 气泡弹窗删除确认文本
    changeTitle(row) {
      this.confirmTitle = `确定删除视频‘${row.title}’吗？`
    },
    //多选传值
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    //多行删除对应数据
    async remove() {
      let params = []
      this.multipleSelection.forEach((item) => params.push(item))

      if (params.length == 0) {
        return this.$message({
          type: "warning",
          message: "请选择数据！",
        })
      } else {
        await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        const res = await this.$http.delete(`rest/videos`, { data: params })
        this.fetch()
        this.$notify({
          title: "成功",
          position: "top-left",
          type: "success",
          message: "视频已删除！",
        })
      }
    },
    //单个删除
    async singleRemove(row) {
      const res = await this.$http.delete(`rest/videos/${row._id}`)

      this.fetch()
      this.$notify({
        title: "成功",
        position: "top-left",
        type: "success",
        message: "视频已删除！",
      })
    },
    //获取专区数据
    async fetch() {
      const res = await this.$http.get("rest/videos")
      this.tableData = res.data
    },
  },
  created() {
    //页面创建完自动加载数据
    this.fetch()
    //loading时间
    setTimeout(() => {
      this.tableLoading = false
    }, 1200)
  },
}
</script>
